import React, { useEffect, useState } from 'react'
import { Menu, Layout } from "antd"
import { useHistory } from 'react-router-dom';
import http from "../../util/http"
import { useSelector } from 'react-redux';
import { UserOutlined, HomeOutlined } from "@ant-design/icons"
// import { connect } from 'react-redux';
const { SubMenu } = Menu;
const { Sider } = Layout;
function SideMenu(props) {
    const history = useHistory();
    // 渲染菜单列表的函数
    function onClick(menu) {
        // console.log(key, keyPath, menu);
        history.push(menu.key)
    }
    const checkPagepermisson = (item) => {
        return item.pagepermisson == 1
    }
    const [menu, SetMenu] = useState([]);
    // const [defaultList, setDefault] = useState([])
    useEffect(() => {
        http.get("/rights?_embed=children")
            .then(res => {
                SetMenu(res.data)
                // setDefault(res.data.key)
            })
    }, []);
    // console.log(menu);
    // const onChange = (openKeys) => {
    //     console.log(menu, openKeys);
    // }
    const openKeys = menu.map(item => {
        return ["/" + item.key.split("/")[0, 1]]
    })
    // const openKeys = ["/" + menu.key.split("/")[0, 1]]
    const renderMenu = (menu) => {
        return menu.map(item => {
            if (item.children?.length > 0 && checkPagepermisson(item)) {
                return <SubMenu key={item.key} path={item.key} title={item.title} icon={<UserOutlined />}>

                    {renderMenu(item.children)}

                </SubMenu>
            }
            {
                return checkPagepermisson(item) && <Menu.Item key={item.key}
                    path={item.key}
                    onClick={onClick}
                    icon={<HomeOutlined />}
                > {item.title}</Menu.Item>
            }
        })
    }
    const collapsed = useSelector(state => state.isCollapsed.collapsed)
    // const title = useSelector(state => state.isCollapsed.title)
    // collapsed={props.isCollapsed}
    return (
        <Sider trigger={null} collapsible collapsed={collapsed}>
            <div className="logo" style={{ overflow: "hidden", fontSize: 15 }} > 全球新闻发布管理系统</div>
            <Menu theme="dark" mode="inline" onClick={onClick}
                defaultSelectedKeys={menu.key}
                defaultOpenKeys={openKeys}
            // items={menu}
            // onOpenChange={onChange}
            >
                {renderMenu(menu)}
            </Menu>
        </Sider>
    )
}

// const mapStateToProps = ({ Collapsed: { isCollapsed } }) => {
//     return {
//         isCollapsed
//     }
// }
// export default connect(mapStateToProps)(SideMenu)
export default SideMenu